<template>
  <div class="orgTree">
    <div class="title_box">
      <div class="title">组织机构</div>
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <div class="tree_box">
      <el-tree accordion :current-node-key="defaultCheck" node-key="id" :default-expanded-keys="defaultShowNodes"
        highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="cancel">
      <DialogForm v-if="dialogConfig.isShow" slot="dialog" @handleNodeClick="handleClick" ref="formTasking"
        :formConfig="formConfig" />
    </LsdDialog>
  </div>
</template>

<script>
import {
  tree,
  organizationAdd,
  refresh
} from "@/api/SystemConfig/organization";
export default {
  components: {},
  data() {
    return {
      pid: "",
      path: "",
      defaultShowNodes: ["1533835007229984"],
      defaultCheck: "1545604423483424",
      data: [],
      defaultProps: {
        children: "children",
        label: "orgName",
        value: "id"
      },
      form: {},
      dialogConfig: {
        title: "组织机构新增",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确定",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      formConfig: {
        formData: [
          {
            type: "selectTree",
            label: "上级机构",
            prop: "superiorDept",
            name: "superiorDeptId",
            keyWord: "keyWords",
            treeRef: "treeRef",
            clickClose: true,
            commonClick: true,
            title: "上级机构选择",
            choose: false,
            ref: "tree_select",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            label: "组织机构名称",
            type: "input",
            prop: "orgName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "组织机构编码",
            type: "input",
            prop: "orgCode",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "机构类型",
            prop: "orgType",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "1",
                label: "单位"
              },
              {
                value: "2",
                label: "部门"
              },
              {
                value: "3",
                label: "班组"
              },
              {
                value: "4",
                label: "其他"
              }
            ]
          },
          {
            label: "排序",
            type: "number",
            prop: "sort",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "机构级别",
            prop: "level",
            name: "level",
            lableWidth: "140px",
            isDisabled: true,
            class: "sjgy",
            option: [
              {
                value: 1,
                label: "1"
              },
              {
                value: 2,
                label: "2"
              },
              {
                value: 3,
                label: "3"
              },
              {
                value: 4,
                label: "4"
              },
              {
                value: 5,
                label: "5"
              },
              {
                value: "6",
                label: "6"
              }
            ]
          },
          {
            label: "组织机构别名",
            type: "input",
            prop: "orgOtherName",
            class: "sjgy",
            lableWidth: "140px"
          }
        ],
        rules: {
          superiorDept: [
            { required: true, message: "请选择上级机构", trigger: "blur" }
          ],
          orgName: [
            { required: true, message: "请输入组织机构名称", trigger: "blur" }
          ],
          orgType: [
            { required: true, message: "请选择机构类型", trigger: "blur" }
          ],
          level: [
            { required: true, message: "请选择机构级别", trigger: "blur" }
          ]
        }
      },
      addEcho: {
        id: "1533835007229984",
        level: 1,
        orgName: "国网湖北省电力有限公司",
        pid: "",
        path: ""
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getOrgTree("1533835007229984");
  },
  methods: {
    handleNodeClick(data, node, item) {
      this.addEcho = {
        id: data.id,
        orgName: data.orgName,
        level: data.level,
        path: data.path
      };
      this.$emit("handleTree", data, node, item);
    },
    // 刷新组织机构缓存
    getRefresh() {
      refresh().then(res => {
        console.log(res, "---res");
      });
    },
    // 组织机构树查询
    async getOrgTree(id, type) {
      try {
        const parmas = {
          pid: id
        };
        this.getRefresh();
        await tree(parmas).then(res => {
          if (type) {
            this.formConfig.formData[0].treeData.data = res;
          } else {
            this.data = res;
            // this.$nextTick(() => {
            // console.log(res[0].children[0].id, "---res[0].children[0].id");
            // this.$nextTick(() => {
            this.$set(this, "defaultCheck", String(res[0].children[0].id));
            // });
            // this.defaultCheck = res[0].children[0].id;
            // });
            this.$emit(
              "handleTree",
              {
                id: res[0].children[0].id,
                orgName: res[0].children[0].orgName,
                sort: res[0].children[0].sort,
                path: res[0].children[0].path,
                level: res[0].children[0].level
              }
            );
          }
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 新增组织机构
    add() {
      this.dialogConfig.isShow = true;
      this.getOrgTree("1533835007229984", "add");
      this.$nextTick(() => {
        // const detailForm = this.$parent.$refs.formTasking.form;
        this.path = this.addEcho.path;
        this.pid = this.addEcho.id;
        this.$refs.formTasking.form = {
          superiorDept: this.addEcho.orgName,
          superiorDeptId: this.addEcho.id,
          level: this.addEcho.level + 1
        };
      });
    },
    onActionClick(item) {
      this[item.id]();
    },
    cancel() {
      this.$set(this.$refs.formTasking, "form", {});
      this.dialogConfig.isShow = false;
    },
    // 新增组织机构确认
    async submit() {
      this.$refs.formTasking.isValidate();
      const flag = this.$refs.formTasking.flag;
      if (flag) {
        try {
          const params = {
            ...this.$refs.formTasking.form,
            pid: this.pid,
            path: this.path
          };
          params.sort = Number(params.sort);
          const res = await organizationAdd(params);
          console.log(res, "-----res");
          if (res) {
            this.getOrgTree("1533835007229984");
            this.$message({
              message: "添加成功!",
              type: "success"
            });
            this.dialogConfig.isShow = false;
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    // 上级单位点击事件
    handleClick(item, nowId, index, data) {
      this.pid = data.id;
      this.path = data.path;
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.orgTree {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title_box {
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;

    .title {
      font-size: 20px;
      font-weight: 600;
      color: #1890ff;
    }
  }

  .tree_box {
    flex: 1;
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    overflow: scroll;
  }
}

:deep(.el-tree-node__label) {
  font-size: 16px;
  // font-weight: 600;
  color: #303133;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e6f7ff;
  color: #1890ff;
}

// :deep(.el-form-item) {
//   justify-content: center;
// }
</style>
